<template>
  <!-- 办公通知 -->
  <div class="office-notice">
    <div v-for="(item,index) in noticeInfo" :key="index">
      <van-row class="info-wrap" @click="JumpContent">
        <van-col>
          <!-- <div class="content font28" :class="item.isCollect ==0?'is-news':'old-news'">{{item.content}}</div> -->
          <p class="font32 content">{{item.content}}</p>
          <p class="font24 date" style="color: #939393">
            <svg-icon icon-class="dateIcon" class="date-svg" />
            <label>发布时间：</label>
            {{item.date}}
          </p>
          <!-- 暂时隐藏收藏   后期不要去掉 -->
          <!-- <div class="collection-button font24"><van-icon name="success" /><span>已收藏</span></div> -->
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      noticeInfo: [
        {
          id: 1,
          content:
            "我校学生在全国大学生农业建筑环境与能源工程 相关比赛中荣获一等奖",
          date: "2017-07-12",
          isCollect: 0 // 是否收藏 0未  1已
        },
        {
          id: 2,
          content:
            "我校学生在全国大学生农业建筑环境与能源工程 相关比赛中荣获一等奖我校学生在全",
          date: "2017-07-12",
          isCollect: 1 // 是否收藏
        },
        {
          id: 3,
          content: "建筑环境与能源工程相关比赛中荣获一等奖",
          date: "2017-07-12",
          isCollect: 0 // 是否收藏
        },
        {
          id: 4,
          content:
            "我校学生在全国大学生农业建筑环境与能源工程 相关比赛中荣获一等奖 拷贝 2",
          date: "2017-07-14",
          isCollect: 0 // 是否收藏
        },
        {
          id: 4,
          content: "[人事处]关于推荐申报2017年度华夏建设科学 技术奖的通知",
          date: "2017-07-24",
          isCollect: 0 // 是否收藏
        }
      ]
    };
  },
  methods: {
    //跳转正文
    JumpContent() {
      this.$router.push({
        name: "officeNoticeDetails",
        params: { isCollect: true }
      });
      let item = {
        headerNavTitle: "办公通知", // 将当前页面加载到路由中
        name: "正文",
        isCollect: true
      };
      this.$store.dispatch("set_header_title", item);
    }
  }
};
</script>

<style lang="less" >
// 办公通知
.office-notice {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 4px;
  .info-wrap {
    padding: 6px 10px 10px;
    border-bottom: 1px solid #eeeeee;
    .van-col {
      position: relative;
      width: 100%;
      .collection-button {
        position: absolute;
        right: 10px;
        bottom: 0;
        z-index: 10;
        background-color: #f5f5f5;
        color: #747474;
        border: none;
        width: 73px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border-radius: 15px;
        .van-icon {
          vertical-align: middle;
        }
        span {
          margin-left: 3px;
          display: inline-block;
          vertical-align: top;
        }
      }
    }
    .content {
      padding-right: 12px;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #4b4b4b;
    }
    .date {
      padding-top: 14px;
      .date-svg {
        width: 10px;
        height: 10px;
      }
      label {
        display: inline-block;
        padding: 0 5px;
        vertical-align: middle;
      }
    }
    &.is-news {
      color: #6a4781;
    }

    &.old-news {
      color: #777;
    }
  }
}
</style>